<template>
  <div class="header-container">
    <div class="header-box">
      <i class="iconfont icon-caidan caidan" @click="menuClick"></i>
      <!-- logo -->
      <div class="logo-box" @click="$router.push('/')">
        Magento
      </div>
      <div class="content-box">
        <ul>
          <li
            v-for="item in list"
            :key="item.id"
            @mouseenter="mouseEnter(item)"
            @click="_click(item.name, item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right-box">
        <search-box class="right-box-item"></search-box>
        <user-box class="right-box-item"></user-box>
        <div class="right-box-item heart-box">
          <i class="iconfont icon-heart"></i>
        </div>
        <handbag-box
          @click="drawer = true"
          class="right-box-item"
        ></handbag-box>
      </div>
      <div
        class="head-hiden-box"
        v-show="modalView"
        @mouseleave="modalView = false"
      >
        <div class="head-hiden-wrap">
          <div v-for="(item, index) in showValue.items">
            <p>{{ item.title }}</p>
            <ul>
              <li
                v-for="(tip, j) in item.list"
                :key="j"
                @click="_childrenClick(tip)"
              >
                {{ tip.name }}
              </li>
            </ul>
          </div>
          <div class="last-box">
            <el-row :gutter="20">
              <el-col
                :span="12"
                v-for="(item, index) in showValue.last"
                :key="index"
              >
                <el-image :src="item.src"></el-image>
                <p>{{ item.title }}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
		<!-- hanbag -->
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      custom-class="product-drawer"
    >
      <div class="drawer-container">
        <div class="top" v-if="productSize">
          <div class="drawer-product-container">
            <div
              class="product-list"
              v-for="(item, index) in productList"
              :key="index"
            >
              <el-image
                style="width: 80px; height: 80px"
                :src="item.src"
              ></el-image>
              <div class="center-view">
                <span class="name">{{ item.name }}</span>
                <p class="see-detail" @click="seeDetailClick(item)">
                  See Detail:
                  <i
                    :class="
                      item.isActive ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </p>
                <div class="see-view" v-show="item.isActive">
                  <p>SELECT SIZE</p>
                  <span>44</span>
                </div>
                <span>{{ "Qty: " + item.qty }}</span>
                <br />
                <span class="price">
                  {{ "$" + item.price }}
                </span>
              </div>
              <div class="product-icon">
                <i class="el-icon-s-tools"></i>
                <br />
                <i
                  class="el-icon-circle-close"
                  @click="itemDelete(item.id)"
                ></i>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-price">
              <span>Cart Subtotal:</span>
              <span>{{ "$" + priceTotal }}</span>
            </div>
            <div class="bottom-btn">
              <div @click="viewCartClick">View Cart</div>
              <div @click="checkOutClick">Check Out</div>
            </div>
          </div>
        </div>
        <div v-else class="empty-container">
          <p>暂无数据</p>
        </div>
      </div>
    </el-drawer>
		<!-- menu -->
		<el-drawer :visible.sync="menuShow" direction="ltr" custom-class="product-drawer" >
			<div class="menu-logo">Magento</div>
			<div v-for="(item, index) in list" :key="index">
				<div class="menu-title" @click="_click(item.name, item.id)">
					{{item.name}}
					<i v-show="item.isChild" style="cursor: pointer" :class="item.is_active? 'el-icon-arrow-down': 'el-icon-minus'" @click.stop="menuChange(item)"></i>
				</div>
				<div class="sub-container" v-show="!item.is_active">
					<div class="sub">{{"BRANDS"}}</div>
					<div class="sub-name" v-for="j in item.children_data" :key="j.id" @click="_childrenClick(j)">{{j.name}}</div>
				</div>
			</div>
		</el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { categories, cartDelete } from "@/api/rest_api";
export default {
  components: {
    SearchBox: () => import("./components/search"),
    UserBox: () => import("./components/user"),
    HandbagBox: () => import("./components/handbag")
  },
  data() {
    return {
      list: [
        {
          id: 0,
          name: "New Arrivals",
        },
        {
          id: 1,
          name: "Hot releases"
        },
        {
          id: 2,
          name: "Footwear",
          items: [
            {
              title: "SHOP BY CATEGORY",
              list: [
                "View All",
                "Sneakers",
                "Boots",
                "Shoes",
                "Sandals & flip flops",
                "Men",
                "Women"
              ]
            },
            {
              title: "BRANDS",
              list: ["Adidas", "Asics", "Converse", "Jordan", "Nike", "Vans"]
            },
            {
              title: "FEATURED",
              list: [
                "Nike Air Max",
                "Nike Air Force 1",
                "adidas ZX",
                "adidas Ultraboost",
                "adidas Superstar"
              ]
            }
          ],
          last: [
            {
              title: "Nike",
              src: require("_a/Header/1.jpg")
            },
            {
              title: "Salomon",
              src: require("_a/Header/2.jpg")
            }
          ]
        },
        {
          id: 3,
          name: "Clothing",
          items: [
            {
              title: "SHOP BY CATEGORY",
              list: [
                "View All",
                "Sweatshirts",
                "Jackets",
                "Coats",
                "Sweaters and Cardigans",
                "T-Shirts",
                "Shirts",
                "Polo Shirts",
                "Fleece Jackets",
                "Pants",
                "Joggers",
                "Jeans",
                "Women's Clothing"
              ]
            },
            {
              title: "FEATURED",
              list: [
                "Reception",
                "Billionaire Boys Club",
                "Pop Trading Company",
                "Carhartt WIP",
                "Comme des Garçons",
                "DENISE REIN",
                "Polo Ralph Lauren",
                "KAPITAL",
                "11 by Boris Bidjan Saberi",
                "adidas Y-3",
                "HUF",
                "Neighborhood",
                "Rick Owens"
              ]
            }
          ],
          last: [
            {
              title: "Comme des Garçons",
              src: require("_a/Header/3.jpg")
            },
            {
              title: "Casablanca",
              src: require("_a/Header/4.jpg")
            }
          ]
        },
        {
          id: 4,
          name: "Accessories",
          items: [
            {
              title: "SHOP BY CATEGORY",
              list: [
                "View All",
                "Sunglasses",
                "Hats / Caps",
                "Backpacks",
                "Fanny Packs",
                "Shoe Care",
                "Socks",
                "Art toys",
                "Scarves & Gloves",
                "Wallets",
                "Gifts & Utilities",
                "Bags & Totebags"
              ]
            },
            {
              title: "FEATURED",
              list: [
                "Comme des Garçons Wallets",
                "Hender Scheme",
                "Jason Markk",
                "Kuboraum",
                "Medicom Toy",
                "Stance"
              ]
            }
          ],
          last: [
            {
              title: "Hats and Caps",
              src: require("_a/Header/5.jpg")
            },
            {
              title: "Socks",
              src: require("_a/Header/6.jpg")
            }
          ]
        },
        {
          id: 5,
          name: "Brands",
          items: [
            {
              title: "SHOP BY CATEGORY",
              list: [
                "View All",
                "adidas",
                "Asics",
                "Carhartt WIP",
                " Balenciaga",
                "Casio",
                "Converse",
                "Champion",
                "Fear Of God",
                "Gucci",
                "Jordan",
                "MCQ"
              ]
            },
            {
              title: "FEATURED",
              list: [
                "New Balance",
                "Neighborhood",
                "Nike",
                "Kuboraum",
                "Medicom Toy",
                "Stance"
              ]
            }
          ],
          last: [
            {
              title: "Nike",
              src: require("_a/Header/7.jpg")
            },
            {
              title: "Salomon",
              src: require("_a/Header/8.jpg")
            }
          ]
        },
        {
          id: 6,
          name: "Deals",
          items: [
            {
              title: "SHOP BY CATEGORY",
              list: [
                "View All",
                "adidas",
                "Asics",
                "Carhartt WIP",
                " Balenciaga",
                "Casio",
                "Converse",
                "Champion",
                "Fear Of God",
                "Gucci",
                "Jordan",
                "MCQ"
              ]
            },
            {
              title: "BRANDS",
              list: ["Adidas", "Asics", "Converse", "Jordan", "Nike", "Vans"]
            },
            {
              title: "FEATURED",
              list: [
                "New Balance",
                "Neighborhood",
                "Nike",
                "Kuboraum",
                "Medicom Toy",
                "Stance"
              ]
            }
          ],
          last: [
            {
              title: "Deals",
              src: require("_a/Header/9.jpg")
            }
          ]
        },
        {
          id: 7,
          name: "Blog"
        }
      ],
      modalView: false,
      showValue: {
        items: [],
        last: []
      },
      title: "",
      drawer: false,
      menuShow: false,
      peoductCardList: []
    };
  },

  computed: {
    ...mapGetters(["productList", "cardCode", "priceTotal"]),
		productSize() {
			if (Array.isArray(this.productList) && this.productList.length) return true;
			return false;
		}
  },

  mounted() {
    this.getCategories();
  },

  methods: {
    mouseEnter(item) {
      if (!item.children_data.length) return (this.modalView = false);
      this.modalView = true;
      this.showValue.items[0] = { title: "BRANDS", list: item.children_data };
    },
    _click(name, id) {
      if (this.title === name) return;
			this.menuShow = false;
      this.title = name;
      this.modalView = false;
      if (name === "Brands") return this.$router.push("/brands"), this.title = '';
      if (name === "Blog") return this.$router.push("/blog"), this.title = '';
      this.$router.push({ path: "/product", query: { title: name, id: id } });
    },
    _childrenClick(item) {
			this.menuShow = false;
      this.$router.push({
        path: "/product",
        query: { title: item.name, id: item.id }
      });
    },
    async getCategories() {
      let { error, res } = await categories();
      if (error) return;
      this.list = res.children_data;
    },
    // get card-detail
    getCardDetail() {
      for (let i in this.productList) {
        this.peoductCardList.push();
      }
    },
    seeDetailClick(item) {
      item.isActive = !item.isActive;
    },
    async itemDelete(id) {
      let { error } = await cartDelete(this.cardCode, id);
      if (error) return;
      this.$store.dispatch("product/deleProduct", id);
    },
		menuChange(item) {
			item.is_active = !item.is_active;
		},
		viewCartClick() {
			if(this.$route.path === '/shopping/cart') return;
			this.$router.push('/shopping/cart');
			this.drawer = false;
		},
		checkOutClick() {
			this.$router.push('/checkout');
			this.drawer = false;
		},
		menuClick() {
			this.menuShow = true;
			for (let i in this.list) {
				this.list[i].isChild = false;
				if (this.list[i].children_data.length) {
					this.list[i].isChild = true;
				}
			}
		}
  }
};
</script>
<style lang="scss" scoped>
.header-container {
  height: 62px;
}
.header-box {
  position: fixed;
  display: flex;
  width: 100%;
  height: 62px;
  align-items: center;
  padding: 0 16px;
  z-index: 2000;
  background-color: #fff;

  & > .logo-box {
    text-align: center;
    font-weight: 600;
    color: #1a1a1a;
    margin-right: 30px;
    cursor: pointer;
    @media (min-width: 1000px) {
      font-size: 24px;
			width: 118px;
    }
    @media (max-width: 999px) {
      font-size: 16px;
			width: 90px;
    }
  }

  .caidan {
    margin-right: 10px;
    cursor: pointer;
    @media (min-width: 1000px) {
      display: none;
    }
    @media (max-width: 999px) {
      display: inline-block;
    }
  }

  & > .content-box {
    @media (min-width: 1200px) {
      width: 656px;
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
      width: 510px;
    }
    @media (max-width: 999px) {
      display: none;
    }
    & > ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      & > li {
        font-weight: 600;
        color: #1a1a1a;
        cursor: pointer;
        position: relative;
        transition: all 0.2s linear;
        @media (min-width: 1200px) {
          font-size: 14px;
          margin-right: 20px;
        }
        @media (min-width: 768px) and (max-width: 1199px) {
          font-size: 12px;
          margin-right: 10px;
        }
        &:last-child {
          margin-right: 0;
        }
        &:after {
          position: absolute;
          bottom: -4px;
          left: 0;
          content: "";
          height: 2px;
          width: 100%;
          background: #000;
          transform: scaleX(0);
          transition: all 0.26s ease-in-out;
        }
        &:hover:after {
          transform: scaleX(1);
        }
      }
    }
  }
  & > .right-box {
    @media (min-width: 1200px) {
      width: calc(100% - 836px);
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
      width: calc(100% - 690px);
    }
    @media (max-width: 999px) {
      width: calc(100% - 147px);
    }
    display: flex;
    height: 62px;
    align-items: center;
    justify-content: flex-end;
    .right-box-item {
      cursor: pointer;
      &:nth-child(2) {
        margin: 0 10px;
      }
      &:nth-child(3) {
        @media (min-width: 1200px) {
          display: inline-block;
        }
        @media (max-width: 1199px) {
          display: none;
        }
        margin-right: 10px;
        .iconfont {
          font-size: 24px;
        }
      }
    }
  }

  & > .head-hiden-box {
    width: 100%;
    position: absolute;
    top: 62px;
    left: 0;
    background-color: #fff;
    z-index: 999;

    & > .head-hiden-wrap {
      padding: 30px calc(106px + 15px) 10px;
      display: flex;

      & > div {
        width: 25%;
        min-width: 220px;
        & > p {
          font-size: 10px;
          color: #969696;
        }
        li {
          height: 24px;
          line-height: 24px;
          font-size: 15px;
          cursor: pointer;
        }
      }

      & > .last-box {
        flex-grow: 2;
      }
      ul,
      li {
        list-style: none;
        padding: 0;
        margin: 0;
      }
    }
  }
}
.drawer-container {
  height: 100%;
  .top {
    height: 100%;

    .drawer-product-container {
      height: calc(100% - 100px);
      overflow: hidden auto;
    }

    .bottom {
      margin: 0 30px;
      border-top: 1px solid #1a1a1a;
      .bottom-price {
        margin-top: 15px;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        & > span:last-child {
          font-weight: 600;
        }
      }
      .bottom-btn {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        & > div {
					cursor: pointer;
          width: 140px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          background: #1a1a1a;
          color: #fff;
          font-size: 15px;
          border-radius: 5px;
        }
      }
    }
  }
  .empty-container {
    p {
      text-align: center;
    }
  }
}
.product-list {
  width: 350px;
  padding: 0 20px;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }

  .center-view {
    width: 150px;
    font-size: 12px;
    .name {
      color: #1a1a1a;
      font-size: 12px;
      font-weight: 500;
    }
    p {
      margin: 5px 0;
    }
    p.see-detail {
      border-color: #e1e1e1;
      font-size: 12px;
      cursor: pointer;
    }
    .price {
      font-weight: 600;
      font-size: 14px;
    }
    .see-view {
      p {
        font-weight: 600;
      }
    }
  }

  .product-icon {
    i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.menu-logo {
	padding-left: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #1a1a1a;
	font-size: 12px;
}

.menu-title {
	padding-left: 20px;
	padding-bottom: 10px;
	color: #333;
	font-size: 14px;
}

.sub-container {
	padding-left: 40px;

	.sub {
		color: #969696;
		font-size: 10px;
		margin-bottom: 10px;
	}
	.sub-name {
		color: #333;
		font-size: 13px;
		line-height: 24px;
		cursor: pointer;
	}
}
</style>
